<template>
  <div class="allOrder">
    <!-- 引入头部组件 -->
    <div class="headerBox">
      <header1View>
        <template v-slot:left>
          <div>
            <van-icon class="header_left"
                      @click="back"
                      name="arrow-left" />
          </div>
        </template>
        <template v-slot:center>
          <div class="header_center">
            团购订单
          </div>
        </template>
        <template v-slot:right>
          <div>
            <van-icon class="header_right"
                      @click="searchHandel"
                      name="search" />
          </div>
        </template>
      </header1View>
    </div>
    <div class="content">
      <!-- tab栏切换 -->
      <van-tabs v-model="active">
        <van-tab title="未使用"></van-tab>
        <van-tab title="已退款"></van-tab>
        <van-tab title="全部">
          <!-- 订单列表 -->
          <div class="orderList">
            <!-- 订单item -->
            <div class="orderItem"
                 v-for="item in orderList"
                 :key="item.id">
              <div class="displayF">
                <!-- 商品图片，标题  -->
                <div>
                  <div class="goodsInfo"
                       v-for="item2 in item.goodsInfoList"
                       :key="item2.num">
                    <div class="pic_title">
                      <div class="pic">
                        <img :src='item2.src'
                             alt="">
                      </div>
                      <div class="title_num">
                        <div class="title"
                             @click="orderState">
                          <span class="titleWords">{{item2.title}}</span>
                          <span>
                            <van-icon name="arrow" />
                          </span>
                        </div>
                        <div class="goodsState">{{item2.goodsState}}</div>
                        <div class="num">{{item2.num}}</div>
                      </div>
                    </div>

                  </div>
                </div>
                <!-- 订单状态 -->
                <div class="state">{{item.orderState}}</div>
              </div>
              <!-- 预留手机 -->
              <div class="tel">
                <div>预留手机</div>
                <div>{{item.tel}}</div>
              </div>
              <!-- 应付款 -->
              <div class="payMoney">
                <div>应付款</div>
                <div>{{item.payMoney}}</div>
              </div>
              <!-- 预计收入 -->
              <div class="clearF">
                <div class="incoming">
                  <span>本单预计收入:</span>
                  <span class="redColor">{{item.incoming}}</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {orderAxios} from '@/https/group'
import header1View from '../../components/header1View'
export default {
  components: {
    header1View
  },
  data () {
    return {
      active: 2,//tab栏默认显示
      orderList: [
        {
          id: '1',
          orderState: '待付款',
          tel: '+86134****1234',
          payMoney: '698',
          incoming: '677.9',
          goodsInfoList: [
            {
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png',
              title: '烤肉两人套餐烤肉两人套餐烤肉两人套餐',
              goodsState: '',
              num: 'x1',
            }
          ]
        },
        {
          id: '2',
          orderState: '交易关闭',
          goodsInfoList: [
            {
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png',
              title: '烤肉两人套餐烤肉两人套餐烤肉两人套餐',
              goodsState: '',
              num: 'x1',
            },
            {
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png',
              title: '烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐烤鱼单人套餐',
              goodsState: '退款中',
              num: 'x1',
            }
          ],

          tel: '+86134****1234',
          payMoney: '998',
          incoming: '966.9'
        }
      ]
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 头部搜索图标
    searchHandel () {
      this.$router.push('searchOrder')
    },
    // 点击跳转订单团购详情
    orderState () {
      this.$router.push('/orderStateView')
    },
  },
  created(){
    orderAxios(1,6)
    .then(
        res=>{
            console.log(res.data)
            this.activityNum=res.total;
            this.card=res.data.data;
        }
    )
    .catch(
        err=>{
            console.log(err)
        }
    )
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.allOrder {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}
.header_left {
  margin-left: 10px;
}
.header_center {
  text-align: center;
  margin: 0 auto;
}
.header_right {
  margin-right: 10px;
}
.content {
  font-size: 14px;
}
.orderList {
  margin: 15px;
}
.orderItem {
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.goodsInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pic_title {
  display: flex;
}
.pic img {
  width: 70px;
  height: 70px;
}
.title_num {
  margin-left: 10px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-content: stretch;
}
.titleWords {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.num {
  display: inline-block;
  // line-height: 85px;
}
.state {
  color: red;
}
.tel,
.payMoney {
  height: 30px;
  line-height: 30px;
  color: rgb(75, 73, 73);
  display: flex;
  justify-content: space-between;
}
.payMoney {
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(232, 230, 230);
}
.clearF {
  height: 30px;
  line-height: 30px;
}
.incoming {
  margin-top: 10px;
  float: right;
}
.redColor {
  margin-left: 5px;
  color: #cc0000;
  font-weight: 700;
}
.goodsState {
  font-size: 12px;
  color: #ff6e53;
}
.displayF {
  display: flex;
  justify-content: space-between;
}
</style>